import React, {Suspense} from "react"
import {Switch, Redirect, Route} from "react-router-dom";

/* 调用组件时，基于属性，传递路由表进来，动态设置路由规则 */

/*
*   在 react-router-dom v5，基于 Route 路由匹配渲染的组件，路由会默认给每个组件传递三个属性
*       + history
*       + location
*       + match
*
* */
const RouterView = function (props) {
    // 获取传递的路由表
    let {routes} = props
    return <Switch>
        {/* 循环设置路由规则 */}
        {
            routes.map((item, index) => {
                let {redirect, from, to, exact, path, component: Component, name, meta, children} = item,
                    config = {}
                if (redirect) {
                    // 重定向的规则
                    config = {to}
                    if (from) config.from = from
                    if (exact) config.exact = true
                    return <Redirect key={index} {...config}/>
                }
                // 正常匹配规则
                config = {path}
                if (exact) config.exact = true
                return <Route key={index} {...config} render={(props) => {
                    // 统一基于render函数处理
                    // Suspense.fallback：在异步加载的组件没有完成之前，先展示的效果
                    // 在render中可以获取传递的属性
                   return <Suspense fallback={<>正在处理中...</>}>
                        <Component {...props} />
                    </Suspense>
                }}/>
            })
        }
    </Switch>
}
export default RouterView